/*
 * @author: Victor
 * @Date: 2021-04-12 09:29:25
 * @LastEditTime: 2021-04-12 09:55:28
 */
window.addEventListener('load', function () {
  // 需求:
  // 1 鼠标滑过focus时 显示向左向右箭头，移出时隐藏
  // 2 动态生成小圆圈(个数和轮播图张数一致)，默认第一个高亮
  // 3 点击小圆圈时切换(animate)到对应的图片,且让当前小圆圈高亮
  // 4 点击向右箭头切换到下一张，小圆圈高亮切换
  // 5 点击向左箭头，切换到上一张，小圆圈高亮切换
  // 6 自动播放(定时器)

  //   1 显示隐藏
  // 获取元素
  var focus = document.querySelector('.focus');
  var left = focus.querySelector('.arrow-l');
  var right = focus.querySelector('.arrow-r');
  var ul = focus.querySelector('ul');
  var ol = focus.querySelector('ol');
  // 关键参数
  var w = focus.offsetWidth;
  // 标记当前轮播图索引
  var index = 0;
  // 自动播放定时器
  var timer;

  focus.addEventListener('mouseover', function () {
    left.style.display = 'block';
    right.style.display = 'block';
    clearInterval(timer);
  });
  focus.addEventListener('mouseout', function () {
    left.style.display = 'none';
    right.style.display = 'none';
    autoplay();
  });

  //   动态生成小圆圈(个数和轮播图张数一致)，默认第一个高亮
  for (var i = 0; i < ul.children.length; i++) {
    //创建li
    var li = document.createElement('li');
    li.setAttribute('index', i);
    //插入到ol中
    ol.appendChild(li);
    // 为li绑定click处理函数,click时切换到对应的图片且高亮切换
    li.addEventListener('click', function () {
      //播放到对应的图片
      index = this.getAttribute('index');
      moveTo(index);
    });
  }
  ol.children[0].className = 'current';

  //   点击向右箭头切换到下一张，小圆圈高亮切换
  right.addEventListener('click', function () {
    index++;
    if (index >= ul.children.length) {
      index = 0;
    }
    moveTo(index);
  });
  //   点击向左箭头切换到上一张，小圆圈高亮切换
  left.addEventListener('click', function () {
    index--;
    if (index < 0) {
      index = ul.children.length - 1;
    }
    moveTo(index);
  });

  // 自动播放
  autoplay();
  function autoplay() {
    timer = setInterval(function () {
      right.click();
    }, 1500);
  }

  function moveTo(index) {
    //切换到index对应的轮播图及小圆圈
    animate(ul, -index * w);
    //高亮切换
    ol.querySelector('.current').className = '';
    ol.children[index].className = 'current';
  }
});
